<template>
  <div class="firstPage">
    <el-row>
      <el-col :span="6">
        <el-button  @click="dialogVisible=true">默认按钮</el-button>
      </el-col>
      <el-dialog v-drag
       title="提示"
       :visible.sync="dialogVisible"
       width="30%"
       :before-close="handleClose">
       <span>这是一段信息</span>
       <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
     </el-dialog>
    </el-row>
  </div>
</template>

<script>
  export default {
  
    name: "firstPage",
  
    data() {
  
      return {
        msg: "Welcome to Your Vue.js App",
        dialogVisible: false
      };
  
    },
  
    methods: {
  
      handleOpen(key, keyPath) {
  
        console.log(key, keyPath);
  
      },
  
      handleClose(key, keyPath) {
        this.dialogVisible=false;
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      }
  
    },
    mounted:function(){
     
    }
  
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.el-button+.el-button{
margin-left: 0px;
}

</style>
